<template>
    <section class="VideoSecondaryList-box">
        <app-header></app-header>

        <div class="main-content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/Video">海外直播</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>{{videoTypeName}}</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row :gutter="32" v-show="!noDataShow">
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="aside" v-for="(item, index) in VideoSecondaryTypeItem" :key="index">
                        <a-card :title="null" hoverable :loading="VideoSecondaryTypeListLoading">
                            <router-link :to="{path: goDetailslink, query: {videoId: item.id}}">
                                <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                <div class="font">
                                    <i class="iconfont icon-xuanchuanshipin"></i>
                                </div>
                            </router-link>
                            <div class="bottom transition" v-if="videoTypeShow">
                                <header class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</header>
                                <p><i class="iconfont icon-yanjing2"></i> {{isNull0(item.pageView)}}人观看</p>
                            </div>
                            <div class="bottom transition" v-if="!videoTypeShow">
                                <p class="webkit-text-overflow-1lines">
                                    <span><i class="iconfont icon-dingwei1"></i> {{isNull0(item.activityAddress)}}</span>
                                    <span><i class="iconfont icon-msnui-time-detail"></i> {{isNull0(item.activityTime)}}</span>
                                </p>
                                <p class="webkit-text-overflow-1lines">
                                    <span><i class="iconfont icon-yanjing2"></i> {{isNull0(item.pageView)}}人观看</span>
                                </p>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
                <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
                    <a-pagination
                            :showTotal="total => `共 ${total} 条`"
                            showQuickJumper
                            showSizeChanger
                            :current="pageNumber"
                            :pageSize="pageSize"
                            :total="total"
                            :pageSizeOptions="pageSizeOptions"
                            @change="pageNumberChange"
                            @showSizeChange="pageSizeChange"/>
                </div>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                videoType: this.$route.query.type,  //展会活动-1，现场看房-2，精彩报道-3
                videoTypeName: '', // 面包屑导航——新闻资讯类型：现场看房，展会活动
                goDetailslink: '', // 根据video类型判断跳转到详情页的路径
                videoTypeShow: true,    //根据video类型判断视频列表的.bottom内容展示

                VideoSecondaryTypeItem: [], // 视频二级类型数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 9,   //默认每页显示10条
                total: 0,    //总条数
                pageSizeOptions: ['9', '18', '27', '36'],//自定义每页条数
                VideoSecondaryTypeListLoading: true, //列表加载loading
                noDataShow: false,  //没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //根据video类型判断，video二级类型的列表数据，面包屑二级类型的名称，跳转到详情页的路径，列表的.bottom内容展示
            this.isVideoType();
            //获取video二级类型的详情页数据
            this.getVideoTypeData();

        },
        methods: {
            //根据video类型判断，video二级类型的列表数据，面包屑二级类型的名称，跳转到详情页的路径，列表的.bottom内容展示
            isVideoType() {
                if(this.videoType.toString() == '1'){
                    this.videoTypeName = '展会活动';
                    this.goDetailslink = 'VideoExhibitionDetails';
                    this.videoTypeShow = false;
                }else if(this.videoType.toString() == '2'){
                    this.videoTypeName = '直播看房';
                    this.goDetailslink = 'VideoHouseDetails';
                    this.videoTypeShow = true;
                }else if(this.videoType.toString() == '3'){
                    this.videoTypeName = '媒体报道';
                    this.goDetailslink = 'VideoHMYSGoodReportDetails';
                    this.videoTypeShow = true;
                }
                this.getVideoSecondaryDetails();
            },
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.VideoSecondaryTypeListLoading = true;
                this.getVideoSecondaryDetails();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.getVideoSecondaryDetails();
            },
            // 获取video二级类型列表数据
            getVideoSecondaryDetails() {
                this.VideoSecondaryTypeListLoading = true;
                this.$get(`/video/list/${this.videoType}/${this.pageNumber}/${this.pageSize}`, {
                    sort: true,
                    isRecommend: true,
                }).then(res => {
                    this.VideoSecondaryTypeListLoading = false;
                    if (res.status === 0) {
                        this.VideoSecondaryTypeItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //获取video二级类型的详情页数据
            getVideoTypeData() {
                this.$get(`/video/type/${this.videoType}`).then(res => {
                    if (res.status === 0) {
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                    } else {
                        console.log(res.msg);
                    }
                })
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f5f5f5;
        .VideoSecondaryList-box {
            .main-content {
                padding: 30px 0;
                > .container {
                    > .ant-row{
                        padding: 40px 0 0 0;
                        >.aside{
                            margin: 20px 0;
                            .ant-card {
                                border: none;
                                background: #f7f9fa;
                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                > .ant-card-body {
                                    padding: 0;
                                    > a {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        position: relative;
                                        overflow: hidden;
                                        background: #000;
                                        > img {
                                            width: 100%;
                                            height: 240px;
                                            -webkit-transition: all linear 1s;
                                            -moz-transition: all linear 1s;
                                            transition: all linear 1s;
                                        }
                                        > .font {
                                            width: 100%;
                                            height: 100%;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            text-align: center;
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            > i {
                                                font-size: 30px;
                                                color: #fff;
                                                z-index: 9;
                                                text-align: center;
                                                -webkit-border-radius: 50%;
                                                -moz-border-radius: 50%;
                                                border-radius: 50%;
                                                box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                display: inline-block;
                                                opacity: 0;
                                                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                transition: transform 0.3s, opacity 0.3s;
                                            }
                                            > i:hover {
                                                text-shadow: 0px 0px 16px #88f5f5;
                                            }
                                        }
                                        > p {
                                            width: 100%;
                                            position: absolute;
                                            bottom: 0;
                                            background: rgba(0, 0, 0, .4);
                                            font-size: 12px;
                                            color: #fff;
                                            padding: 0 0 0 12px;
                                            margin-bottom: 0px;
                                        }
                                    }
                                    > a:hover {
                                        > img {
                                            -webkit-transform: scale(1.1, 1.1);
                                            -moz-transform: scale(1.1, 1.1);
                                            transform: scale(1.1, 1.1);
                                            opacity: 0.5;
                                            filter: alpha(opacity=50);
                                        }
                                        > .font {
                                            > i {
                                                opacity: 1;
                                                -webkit-transform: scale(1);
                                                -moz-transform: scale(1);
                                                -ms-transform: scale(1);
                                                -o-transform: scale(1);
                                                transform: scale(1);
                                            }
                                        }
                                    }
                                    .bottom {
                                        padding: 10px 20px;
                                        border: 1px solid #eaebea;
                                        background: #fff;
                                        > header {
                                            font-size: 14px;
                                        }
                                        > p {
                                            font-size: 14px;
                                            > span {
                                                margin: 0 8px;
                                            }
                                            > span:first-of-type {
                                                margin: 0 8px 0 0;
                                            }
                                            margin-bottom: 0px;
                                        }
                                    }
                                }
                            }
                        }
                        .aside:hover{
                            >.ant-card {
                                -webkit-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                -moz-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                            }
                        }
                    }

                }
            }
        }
    }
</style>
